Twitter Bootstrap

[Radiocity]

Все чаще и чаще слышу про Twitter Bootstrap. Все так рады этому форку, что даже хабр забрызгали радугой.

Согласен, при создании backend он подходи идеально.

А как быть с frontend? Стоит ли связываться, ведь годика через два все сайты будут одинаковыми и собственное произведение придется переверстывать.

PS Оговорюсь, не вдавался в глубь изучения, ограничившись парой статей.

[Int]

А теперь ещё для Ъ объясни, что это такое

[keltanas]

Ну во первых, никто не мешает тебе прикрутить дополнительно свои стили и изменить внешний вид готовых элементов, которые прикручиваешь.

К тому же никто не заставляет пользоваться всеми компонентами. Мне так очень нравится верстать на нем много колоночные элементы. Сетка в 12 колонок идеально подходит для большинства задач.

Вот к примеру делал сайт http://kronmo.ru

Верстал с помощью Twitter Bootstrap. Не сказать, что он похож на все остальные. Там остались неизменными только формы, в чем не вижу ничего плохого. На слайдере, с помощью CSS, изменил стрелочки, что сделало их не похожими на стандартный слайдер.

В общем, тут главное не переусердствовать, как и в любом другом деле ))

Int, Это такой CSS-фреймворк. Поставляется вместе с некоторыми jQuery-плагинами. http://twitter.github.com/bootstrap/

Скажем, использовать его плагины понравилось больше, чем jQueryUI. Многое работает само после декларативного объявления. Те же табы, выпадающие меню у кнопок и т.д. Что очень радует )))

[nerv]

Вот к примеру делал сайт http://kronmo.ru

Warning: include() [function.include]: Unable to allocate memory for pool. in /home/kronma/www/site5/public_html/vendors/Smarty-3.1.11/libs/sysplugins/smarty_internal_templatebase.php on line 161

http://kronmo.ru/nashi-meropriyatiya

[keltanas]

Вот к примеру делал сайт http://kronmo.ru

Warning: include() [function.include]: Unable to allocate memory for pool. in /home/kronma/www/site5/public_html/vendors/Smarty-3.1.11/libs/sysplugins/smarty_internal_templatebase.php on line 161

http://kronmo.ru/nashi-meropriyatiya

А вы как заходили? У меня такого нет. Может в этот момент с хостером какая-то трабла была, конечно. Там Петерхост, все-таки.

Все чаще и чаще слышу про Twitter Bootstrap. Все так рады этому форку, что даже хабр забрызгали радугой.

Форк

[keltanas]

Есть расширение для Yii, в котором содержится набор виджетов, подтягивающих Twitter Bootstrap.

http://www.yiiframework.com/extension/bootstrap/

Хотя я делал себе программулю на Yii и Bootstrap без этих виджетов. Все в ручную прописывал. И все работает.

Виджеты просто генерят HTML код, который лень писать самому, вспоминая документацию TwBootstrap.

[F_Z_14]

Подскажите, как можно встроить navbar-fixed-top панель на страницу так, чтобы стили twitter bootstrap не перебивали основные стили сайта и наоборот?

[keltanas]

Подскажите, как можно встроить navbar-fixed-top панель на страницу так, чтобы стили twitter bootstrap не перебивали основные стили сайта и наоборот?

Корректно называть классы в своей верстке, что бы они не конфликтовали с классами бутстрапа.

Ну и свои CSS подключать после бутстраповских, чтобы можно было при желании переопределить какое-то оформление.

[gibigate]

Расскажите что значит backend twitter bootstrap?

[F_Z_14]

Подскажите, как можно встроить navbar-fixed-top панель на страницу так, чтобы стили twitter bootstrap не перебивали основные стили сайта и наоборот?

Корректно называть классы в своей верстке, что бы они не конфликтовали с классами бутстрапа.

Ну и свои CSS подключать после бутстраповских, чтобы можно было при желании переопределить какое-то оформление.

Twitter bootstrap - это не только набор классов. Там же еще практически для всех элементов стили устанавливаются. Поэтому даже если классы не конфликтуют, то будут конфликтовать стили элементов.

[rediskavet]

Подскажите, как можно встроить navbar-fixed-top панель на страницу так, чтобы стили twitter bootstrap не перебивали основные стили сайта и наоборот?

Корректно называть классы в своей верстке, что бы они не конфликтовали с классами бутстрапа.

Ну и свои CSS подключать после бутстраповских, чтобы можно было при желании переопределить какое-то оформление.

Twitter bootstrap - это не только набор классов. Там же еще практически для всех элементов стили устанавливаются. Поэтому даже если классы не конфликтуют, то будут конфликтовать стили элементов.

как вариант перед скачиванием архива можно изменить стили для основных элементов, ну или именно для тех которые не устраивают. Например отдлельно для форм.

http://bootstrap.veliovgroup.com/download.php#variables

[keltanas]

Twitter bootstrap - это не только набор классов. Там же еще практически для всех элементов стили устанавливаются. Поэтому даже если классы не конфликтуют, то будут конфликтовать стили элементов.

А что по вашему в бутстрапе стили, и что такое классы?

Расскажите что значит backend twitter bootstrap?

Тут под бакендом подразумевается админка сайта. Т.е. что бутстрап хорош для создания интерфейса админки. Это очень полезно для программистов с атрофированным чувством дизайна (таких как я, например).

[Softlink]

Мне поставили задачу использовать бутстрап.

Вот, допустим, действительно ли это хорошо, что для того, чтобы сделать какой-нибудь блок на сайте, мне надо для него использовать обертки row и span(1,2,3,4,5...)? Одно без другого использовать нельзя(не переопределяя стили), тогда вопрос - в чем профит? Использовать кучу вложенностей.

keltanas, посмотрел ваш сайт на бутстрапе. Разве это здорово, что логотип находится на 6-м уровне вложенности? А все из-за того, что используем сетку бутстраповскую? Ну и селекторы вида .main-photo .article h2 не считаю чем-то хорошим. Особенно, когда с проектом работают больше 3-х человек.

[keltanas]

Вот, допустим, действительно ли это хорошо, что для того, чтобы сделать какой-нибудь блок на сайте, мне надо для него использовать обертки row и span(1,2,3,4,5...)? Одно без другого использовать нельзя(не переопределяя стили), тогда вопрос - в чем профит? Использовать кучу вложенностей.

Профит в колоссальной экономии времени.

keltanas, посмотрел ваш сайт на бутстрапе. Разве это здорово, что логотип находится на 6-м уровне вложенности? А все из-за того, что используем сетку бутстраповскую? Ну и селекторы вида .main-photo .article h2 не считаю чем-то хорошим. Особенно, когда с проектом работают больше 3-х человек.

Аргументируйте свое недовольство? Чем уровень вложенности не угодил?

Над тем проектом, который Вы видели, не будет работать больше одного человека. И что плохого в селекторах вида? .main-photo .article h2

А использовать БЭМ везде где попало, даже в таких мелких сайтах, также не считаю чем-то хорошим.

Для каждой задачи есть свои инструменты.

[Softlink]

Аргументируйте свое недовольство? Чем уровень вложенности не угодил?

Да ну как-то мне не очень нравится, что для того, чтобы отобразить логотип сайта, надо состряпать слоеный пирог.

И что плохого в селекторах вида? .main-photo .article h2

Если, допустим, нам необходимо сделать еще один h2 в этом блоке, но с другими стилями.

[keltanas]

Да ну как-то мне не очень нравится, что для того, чтобы отобразить логотип сайта, надо состряпать слоеный пирог.

Можно было бы сделать и абсолютным позиционированием, но мне и так хорошо.

Кстати, если бы IE понимал тэги HTML5, вложенность была бы меньше.

Если, допустим, нам необходимо сделать еще один h2 в этом блоке, но с другими стилями.

При каких таких обстоятельствах, семантически равные элементы на одном уровне вам захочется сделать разными? Это как раз, ИМХО, и есть ошибка.

[sigma77]

Кстати, если бы IE понимал тэги HTML5, вложенность была бы меньше.

С небольшим скриптом IE с ними вполне справляется.

Вообщем-то можно обойтись и без скрипта, но это очень далеко не самое оптимальное решение.

[Softlink]

При каких таких обстоятельствах, семантически равные элементы на одном уровне вам захочется сделать разными? Это как раз, ИМХО, и есть ошибка.

h2 - это частный случай, может ведь другой элемент быть: div, span, ul, li, a. Я про такой подход в целом говорю.

[Modestes]

Решил поюзать бутстрап, интересный фреймворк, удобный не спорю, но считаю, что его можно использовать в небольших проектах.

Ибо "слоеный пирог" как выше выразились уже немного сложнее воспринимать.

keltanas

Вопрос.

Как переопределить стили бутстрапа?

Изменения в файле variables.less ни к чему не приводят, хотя должен компилироваться на стороне клиента. (или я плохо понимаю компиляцию)

Скрипт гружу из оф сайта LESS

Выход только компилировать на сервере?

[keltanas]

h2 - это частный случай, может ведь другой элемент быть: div, span, ul, li, a. Я про такой подход в целом говорю.

Был бы div и span, у него стоял необходимый класс. Для элементов, имеющих более конкретное семантическое значение нахожу вредным менять стили в одном блоке. Если у вас на сайте, в одном блоке пойдут 2 списка со ссылками, и у каждого из них будет свой стиль отображения, то сайт скорее на попугая будет походить.

ЗЫЖ к чему вообще этот троллинг?

keltanas

Вопрос.

Как переопределить стили бутстрапа?

Изменения в файле variables.less ни к чему не приводят, хотя должен компилироваться на стороне клиента. (или я плохо понимаю компиляцию)

Скрипт гружу из оф сайта LESS

Выход только компилировать на сервере?

Ну тут надо определиться, хотите использовать less или css. И лучше работать в едином направлении. Если вы хотите стили less перекрыть css'ом, это скорее всего не получится (у меня не вышло).

Так что лучше зайдите на страницу http://twitter.github.com/bootstrap/customize.html и скачайте необходимую сборку.

[Softlink]

ЗЫЖ к чему вообще этот троллинг?

Не, я не троллил. Это просто так, зачем-то прицепился к этому h2) Можно забить и забыть.

У меня задача стояла узнать о целесообразности применения TB в крупном проекте, который будет поддерживаться не одним человеком.

[keltanas]

Не, я не троллил. Это просто так, зачем-то прицепился к этому h2) Можно забить и забыть.

У меня задача стояла узнать о целесообразности применения TB в крупном проекте, который будет поддерживаться не одним человеком.

Ну тут не важно, будет у вас в проекте бутстрап или нет. Важно, как вы свой труд организуете.

Бутстрап только поможет сэкономить время на верстку. Как и любой другой фреймворк экономит время в той отрасли, на которую он рассчитан.

А для стартапов, порой, важнее как можно быстрее показать рабочий вариант, чем вылизывать каждую строку кода.

[Softlink]

Не, я не троллил. Это просто так, зачем-то прицепился к этому h2) Можно забить и забыть.

У меня задача стояла узнать о целесообразности применения TB в крупном проекте, который будет поддерживаться не одним человеком.

Ну тут не важно, будет у вас в проекте бутстрап или нет. Важно, как вы свой труд организуете.

Бутстрап только поможет сэкономить время на верстку. Как и любой другой фреймворк экономит время в той отрасли, на которую он рассчитан.

А для стартапов, порой, важнее как можно быстрее показать рабочий вариант, чем вылизывать каждую строку кода.

Понятно. В моем случае можно жертвовать скоростью разработки в пользу удобства поддержки кода. Пока наличие таких вот оберток и переопределения стилей мне не очень нравится. Точнее, совсем не нравится.

[Modestes]

Ну тут надо определиться, хотите использовать less или css. И лучше работать в едином направлении. Если вы хотите стили less перекрыть css'ом, это скорее всего не получится (у меня не вышло).

Так что лучше зайдите на страницу http://twitter.github.com/bootstrap/customize.html и скачайте необходимую сборку.

Мне в принципе все равно что использовать. Просто понять немогу, если LESS.js компилирует на стороне клиента, то почему он этого не делает при изменении стилей в бутсрапе.

Перекрыть less css'ом можно через !important, но это бред.

[krasnyi]

Решил поюзать бутстрап, интересный фреймворк, удобный не спорю, но считаю, что его можно использовать в небольших проектах.

Ибо "слоеный пирог" как выше выразились уже немного сложнее воспринимать.

keltanas

Вопрос.

Как переопределить стили бутстрапа?

Изменения в файле variables.less ни к чему не приводят, хотя должен компилироваться на стороне клиента. (или я плохо понимаю компиляцию)

Скрипт гружу из оф сайта LESS

Выход только компилировать на сервере?

компилируйте less на сервере

если у пользователя делать - то подумайте, что будет, если у пользователя отключен js???

http://vk.com/pages?oid=-42967112&p=less - вот справка, как это сделать

А вообще less - замечательная штука

Edited November 29, 2012 by krasnyi